<template>
  <a-layout id="components-layout-demo-fixed">
    <a-layout-header class="a-layout-header-container">
      <Sidebar />
    </a-layout-header>

    <a-layout-content
      class="layout-content-app-main"
    >
      <Breadcrumb :menus="menus" />
      <AppMain class="app-main" />
    </a-layout-content>
    <GlobalFooter />
  </a-layout>
</template>

<script>
import { Route, ResizeHandler } from './mixins';
import { baseMixin } from '@/store/app-mixin';
import Sidebar from './Sidebar';
import AppMain from './AppMain';
import { RightContent, GlobalFooter, Breadcrumb } from '@/components';

export default {
  components: {
    Sidebar,
    AppMain,
    GlobalFooter,
    Breadcrumb
  },

  mixins: [Route, ResizeHandler, baseMixin]
};

</script>

<style lang="scss">
#components-layout-demo-fixed {
  .layout-content-app-main {
    // background-color: $gray-20;
    padding: 0 50px;
    margin-top: 80px;
  }

  .app-main {
    // margin-top: calc(#{$sidebar} + #{$margin-base});
    margin-top: $margin-base;
  }

  .a-layout-header-container {
    position: fixed;
    z-index: 1;
    width: 100%;
    background-color: $white;
    box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  }

  @media (max-width: $screen-md) {
    .a-layout-header-container {
      padding: 0 $padding-xs;
    }

    .layout-content-app-main {
      padding: 0 $padding-xs;
      margin-top: 80px;
    }
  }
}
</style>
